<template>
	<div class="main" ref="scrollMain">
		<Tabs v-model="tabValue" type="top-fixed" style="background:#FFF;">
			<TabPane @change="load" name="0"  label="全部" style="">
			</TabPane>
			<TabPane @change="load" name="1" label="待开奖" style="">
			</TabPane>
			<TabPane @change="load" name="3" label="已中奖" style="">
			</TabPane>
			<TabPane @change="load" name="4" label="已撤销" style="">
			</TabPane>
		</Tabs>
		<div class="guess-list">
			<router-link :to="'/guessdetail/'+item.id" v-for="item in list">
				<Listitem class="align-center guess-item" >
					<template slot="left">
						<img class="icon" src="@/assets/yl_img2.png" />
					</template>
					<template slot="center">
						<div class="ml-24">
							<div class="ft-32 ">
								<span class="ft-b">{{item.lottery_name}}</span><span class="ft-24 guess-num">第{{item.issue}}期</span>
							</div>
							<div class="ft-28 guess-price"><span>投注 </span><span class="co-red">{{item.money}}元</span></div>
						</div>
					</template>
					<template slot="right">
						<div :class="'t-r ft-32 mr-40 p-r '+(item.is_append?' guess-success ':'')+(item.status=='已中奖'?' co-red ':'co-gray')">
							{{item.status}}<span v-if="item.is_append" class="zhui-hao">追</span>
						</div>
					</template>
				</Listitem>
			</router-link>
			<div v-show="loadingmore" class="loadmore">正在加载...</div>
		</div>
	</div>
</template>
<script>
	import Tabs from '@/components/tabs';
	import TabPane from '@/components/tabPane';
	import Listitem from "@/components/list-item";
	import {getGuessList} from "@/api/home";
	export default{
		components:{
			Tabs,
			TabPane,
			Listitem
		},
		data(){
			return {
				tabValue:"0",
				page:1,
				loadingmore:false,
				total:0,
				list:[],
				nowLen:0
			}
		},
		mounted(){
			this.startY=0;
			document.addEventListener('touchstart',this.touchstart,false);
			document.addEventListener('touchmove',this.scroll,false);
		},
		beforeDestroy(){
			document.removeEventListener('touchmove',this.scroll,false);
			document.removeEventListener('touchstart',this.touchstart,false);
		},
		methods:{
			touchstart(e){
				this.startY=e.touches[0].pageY;
			},
			load(type){
				this.list=[];
				this.nowLen=0;
				this.total=0;
				this.page=1;
				this.loadingmore=false;
				this.getGuessList();
			},
			scroll(e){
				let self=this;
				if (this.nowLen<this.total&& !this.loadingmore) {
					let scrollTop=document.body.scrollTop;
					let clientheight=this.$refs.scrollMain.clientHeight;
					let winheight=window.innerHeight;
					if (clientheight-scrollTop<winheight+20) {
						let nowy=e.touches[0].pageY;
						if (nowy<self.startY) {
							e.preventDefault();
						}
						this.page++;
						this.loadingmore=true;
						this.getGuessList();
					}
				}
			},
			getGuessList(){
				let tabValue=this.tabValue;
				getGuessList(this.tabValue,this.page).then(res=>{
					if (tabValue==this.tabValue) {
						if (res.code==1) {
							let list=res.data.list;
							this.nowLen+=list.length;
							this.total=res.data.total;
							this.list=this.list.concat(res.data.list);

						}
						this.loadingmore=false;
					}
				});
			}
		}
	}
	
</script>
<style scoped>
	.main .icon{
		width: 96px;
		height: 96px;
	}
	.guess-list{padding-left: 40px;}
	.guess-item{overflow: hidden;}
	.guess-num{margin-left: 16px;}
	.guess-price{margin-top: 6px;}

	.guess-success:after{position: absolute;    
    right: -46px;bottom: -84px;content: " ";
		width: 0;height: 0;border-left: 44px solid #FF9F03;border-top: 44px solid transparent;border-bottom: 44px solid transparent;transform: rotateZ(45deg);
	}
	.zhui-hao{position: absolute;    right: -36px;
    bottom: -50px;
    font-size: 20px;
    transform: scale(0.8);z-index: 1;color: #FFF;}
</style>